<template>
    <div class="park" ref="park">
        <div class="content-box">
            <!-- 顶部区域 -->
            <div class="title-box">
                <div class="button-box"></div>
                <div class="title">智慧停车</div>
                <div class="content"></div>
                <div class="bottom"></div>
            </div>
            <!-- 中间区域 -->
            <div class="center-box">
                <div class="left-box" style="float:left; width:50%; height:100%">
                    <highcharts-component :options="options" :styles="styles" ref="simpleChart"></highcharts-component>
                </div>
                <div class="right-box" style="float:left; width:50%; height:100%">
                    <highcharts-component :options="stateOptions" :styles="styles" ref="simpleChart"></highcharts-component>
                </div>
            </div>
            <!-- 底部图表区域 -->
            <div class="bottom-box">
                <div class="left-box" style="float:left; width:50%; height:100%">
                    <highcharts-component :options="lineOptions" :styles="stylesBottom" ref="simpleChart"></highcharts-component>
                </div>
                <div class="right-box" style="float:left; width:50%; height:100%">
                    <highcharts-component :options="columnOptinos" :styles="stylesBottom" ref="simpleChart"></highcharts-component>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import HighchartsComponent from '@/components/highchart/3dPie'

export default {
    data(){
        return{
            styles: {
                width: 400,
                height: 400,
            },
            stylesBottom: {
                width: 350,
                height: 350,
            },
            options: {
                credits: {
			        enabled: false //去除网址水印
                },
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45
                    },
                    backgroundColor: 'rgba(0,0,0,0)'
                },
                title: {
                    text: '车辆类型统计',
                    style:{
                        color: 'rgb(255,255,255)'
                    }
                },
                plotOptions: {
                    pie: {
                        innerSize: 100,
                        depth: 45
                    }
                },
                series: [{
                    name: '比例',
                    
                    data: [
                        ['大客车', 8],
                        ['小客车', 3],
                        ['大型货车', 8],
                        ['中型货车', 6],
                        ['危险品车辆', 1],
                    ],   
                }]
            },  
            stateOptions: {
                credits: {
			        enabled: false //去除网址水印
                },
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    },
                    backgroundColor: 'rgba(0,0,0,0)'
                },
                title: {
                    text: '车位状态统计',
                    style:{
                            color: 'rgb(255,255,255)'
                        }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '占比',
                    data: [
                        ['占用', 30],
                        ['故障',  5],
                        ['空闲',  65],
                    ]
                }]
            },
            lineOptions:{
                credits: {
			        enabled: false //去除网址水印
                },
                chart: {
                    zoomType: 'x',
                    backgroundColor: 'rgba(0,0,0,0)'
                },
                title: {
                    text: '未来车流走势图',
                    style:{
                        color: 'rgb(255,255,255)'
                    }
                },

                
            },
            columnOptinos:{
                credits: {
			        enabled: false //去除网址水印
                },
                chart: {
                    type: 'column',
                    backgroundColor: 'rgba(0,0,0,0)'
                },
                title: {
                    text: '节假日车流统计',
                    style:{
                        color: 'rgb(255,255,255)'
                    }
                },
                xAxis: {
                    categories: [
                        '春节','清明','端午','五一','中秋','十一','元旦',
                    ],
                    crosshair: true,
                    labels: {
                        style: {
                            color: '#fff',
                        }
	                },
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '车流量 (万辆)',
                        style:{
                            color: 'rgb(255,255,255)'
                        }
                    },
                    labels: {
                        style: {
                            color: '#fff',
                        }
	                },
                },
                tooltip: {
                    // head + 每个 point + footer 拼接成完整的 table
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '预测',
                    data: [120.4, 42.5, 55, 75, 60, 85, 40]
                }, {
                    name: '实际',
                    data: [125.2, 40, 50, 77, 62, 79, 42]
                }]
            }
        };
           
    },
    components:{
        HighchartsComponent
    },
    computed:{
        isShow(){
            return this.$store.state.smartPark
        }
    },
     watch:{
        isShow(){
        // console.log('子菜单'+this.$store.state.childIsShow);
        classie.toggle( this.$refs.park, 'park-open')
        }
    },
    
}
</script>

<style lang="less" scoped>
.park{
    width: 10rem;
    height: 14rem;
    position: fixed;
    left: 27rem;
    background-color: rgba(64,158,255,0.3);
    border: 0.025rem solid white;
    .content-box{
        width: 96%;
        height: 100%;
        position: absolute;
        left:2%;
        border: 0.025rem solid white;
    }
    // 顶部区域
    .title-box{
        width: 100%;
        height: 3.6rem;
        position: relative;
        border: 0.025rem solid white;
        // 顶部切换按钮区域
        .button-box{
            width: 2rem;
            height: 0.5rem;
            position: absolute;
            left: 50%;
            transform: translate(-50%,0);
            border: 0.025rem solid white;
        }
        // 左对齐标题
        .title{
            font-size: 0.275rem;
            position: absolute;
            top: 20%;
            // transform: translate(0,-50%);
            // border: 0.025rem solid white;
        }
        .content{
            width: 100%;
            height: 40%;
            position: absolute;
            top: 1.2rem;
            border: 0.025rem solid yellowgreen;
        }
        .bottom{
            width: 100%;
            height: 20%;
            position: absolute;
            bottom: 0;
            border: 0.025rem solid blueviolet;
        }

    }
    // 中间区域 3d图表
    .center-box{
        width: 100%;
        height: 4rem;
        margin-top: 0.2rem;
        // border: 0.025rem solid red;
    }
    // 底部图表区域
    .bottom-box{
        width: 100%;
        height: 5rem;
        margin-top: 0.8rem;
        border: 0.025rem solid green;
    }

} 
.park.park-open{
    left: 16.2rem;
    transition: 0.1s;
} 
</style>